<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>axios的处理链流程</title>
</head>
<body>

  <script src="https://cdn.bootcss.com/axios/0.19.0/axios.js"></script>
  <script>
    /* 
      拦截器的执行流程：

        请求拦截器2 => 请求拦截器1 => 发ajax请求 => 响应拦截器1 => 响应拦截器2 => 请求的回调

    */

    // 请求拦截器1
    axios.interceptors.request.use(
      config => {
        console.log('request interceptor1 resolve()')
        return config // 如果此处注释掉，返回默认值undefined，在下一环节获取到的config的值就是undefined
      },
      error => {
        console.log('request interceptor1 reject()')
        return Promise.reject(error);
      }
    )
    
    // 请求拦截器2
    axios.interceptors.request.use(
      config => {
        console.log('request interceptor2 resolve()')
        return config
      },
      error => {
        console.log('request interceptor2 reject()')
        return Promise.reject(error);
      }
    )

    // 响应拦截器1
    axios.interceptors.response.use(
      response => {
        console.log('response interceptor1 resolve()')
        return response // 如果此处注释掉，返回默认值undefined，在下一环节获取到的response的值就是undefined
      },
      error => {
        console.log('response interceptor1 reject()')
        return Promise.reject(error);
      }
    )

    // 响应拦截器2
    axios.interceptors.response.use(
      response => {
        console.log('response interceptor2 resolve()')
        return response
      },
      error => {
        console.log('response interceptor2 reject()')
        return Promise.reject(error);
      }
    )

    axios.get('http://localhost:3000/posts')
      .then(response => {
        console.log('data', response.data)
      })
      .catch(error => {
        console.log('error', error.message)
      })

  </script>
</body>

</html>